export const addNewsListDisorder = (editor, opts) => {
  const { Components } = editor;
  const { id, label } = opts;

  const newsListPfx = opts.classPrefix;
  const idContainer = `${id}-container`;
  const idNewsItem = `${id}-news-item`;
  const idNewsLink = `${id}-news-link`;

  Components.addType(id, {
    model: {
      defaults: {
        droppable: false,
        name: label,
        attributes: { class: newsListPfx },
        components: { type: idContainer },
        styles:
          (opts.style ||
            `
          .${newsListPfx} {
            padding: 0;
            margin: 0;
          }

          .${newsListPfx}-container {
            display: flex;
            flex-direction: column;
            list-style-type: square;
          }

          .${newsListPfx}-item {
            border-bottom: 1px dotted #000;
            padding: 10px 0;
          }

          .${newsListPfx}-link {
            color: inherit;
            // text-decoration: none;
            flex: 1;
            float:left;
          }
          .${newsListPfx}-data {
            float:right;
          }
        `) + opts.styleAdditional,
      },
    },
  });

  Components.addType(idContainer, {
    model: {
      defaults: {
        attributes: {
          class: `${newsListPfx}-container`,
          "data-gjs": "news-list",
        },
        name: "News List Container",
        droppable: false,
        draggable: false,
        removable: false,
        copyable: false,
        highlightable: false,
        tagName:'ul',
        components: [
          {
            type: idNewsItem,
            components: [{ type: idNewsLink, components: "机房分布" }],
          },
          {
            type: idNewsItem,
            components: [{ type: idNewsLink, components: "实验中心介绍" }],
          },
          // 可以根据需求添加更多的新闻项目
        ],
      },
    },
  });

  Components.addType(idNewsItem, {
    model: {
      defaults: {
        tagName:'li',
        name: "News Item",
        attributes: { class: `${newsListPfx}-item` },
      },
    },
  });

  Components.addType(idNewsLink, {
    extend: "link",
    model: {
      defaults: {
        name: "News Link",
        draggable: `[data-gjs-type="${idContainer}"]`,
        attributes: { class: `${newsListPfx}-link` },
      },
    },
  });
};
